<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div id="OrderInfo" style="height: 500px; width: 900px"></div>
    </el-card>
  </div>
</template>
<script>
export default {
  mounted () {
    this.initSomething()
  },
  methods: {
    initSomething () {
      var chartDom = document.getElementById('OrderInfo')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '3月', '4月', '5月', '6月', '7月', '8月'],
            ['交易金额', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['订单数量', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['交易成功', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['交易失败', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
          { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
          { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
          { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: { focus: 'data' },
            label: {
              formatter: '{b}: {@3月} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '3月',
              tooltip: '3月'
            }
          }
        ]
      }

      myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0]
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          })
        }
      })
      option && myChart.setOption(option)
    }
  }
}

</script>

<style scoped>
</style>
